<template>
  <div>
    <div v-for="item in Root.apps" class="app__item" @click="item.click">
      <img alt="" :src="item.icon" class="app__item__image" draggable="false" />
      <div class="select-none text-center">
        {{ item.name }}
      </div>
    </div>
  </div>
  <app-container
    v-for="app in useWindowStore.windows"
    v-bind="app"
    title=""
    v-model:x="app.x"
    v-model:y="app.y"
    :app-key="app.appKey"
    :app
    :id="app.id"
    :open="!app.minimized"
  >
    <template #header></template>
    <component :is="app.vm"></component>
  </app-container>
  <!--  任务栏-->
  <bottom-task-bar />
  <MouseStar></MouseStar>
</template>
<script setup lang="ts">
import appIndex, { type IApp } from "@/components/windows/apps.ts";
import AppContainer from "@/components/windows/components/AppContainer/AppContainer.vue";
import { useWindowStore } from "@/components/windows/actives/activeWindow.ts";
import BottomTaskBar from "@/components/windows/components/bottomtaskbar/BottomTaskBar.vue";
import MouseStar from "../MouseStar/Index.vue";
import { isEmpty } from "lodash-unified";

const { getApps } = appIndex;

const Root = (() => {
  const getShallowComponent = <T extends Component>(comp: () => Promise<T>) => {
    return markRaw(defineAsyncComponent(comp));
  };
  const init = async () => {
    if (!isEmpty(useWindowStore.windows)) {
      const globs = import.meta.glob("../../apps/**/*.vue") as Record<string, () => Promise<Component>>;
      for (const app of useWindowStore.windows) {
        const module = globs[app.path ?? ""];
        app.vm = getShallowComponent(module);
      }
    }
    s.apps = await getApps();
  };
  const s = reactive({
    apps: [] as IApp[],
    selected: {},
  });
  init();
  return s;
})();
</script>
<style scoped>
.app__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 120px;
  padding: 10px;
  gap: 5px;

  &:hover {
    cursor: pointer;
    background: #e9f8fb;
  }
}

.app__item__image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  user-select: none;
  text-align: center;
  border-radius: 8px;
}
</style>
